import { useState, useMemo } from 'react';
import { Tabs, Button, message } from 'antd';
import { useApp } from '@inbiz/utils';
import ActionTable from './ActionTable';
import { saveData } from '../service';
import UpdateSvg from '../assets/Update';

const { TabPane } = Tabs;

export default function SyncLang(props: any) {
    const { onClose, allLangs, deleteData, modifyData, setDeleteData, setModifyData, sites, leftRef, setClosable } = props;
    const [currentAction, setCurrentAction] = useState('delete');
    const [updateLoading, setUpdateLoading] = useState(false);
    const appInfo: any = useApp();

    const onUpdate = async () => {
        const _deleteData = deleteData?.filter((item: { op: boolean; }) => item?.op) || [];
        const _modifyData = modifyData?.filter((item: { op: boolean; }) => item?.op) || [];
        let deleteParams: any[] = [];
        _deleteData?.map((item: { [x: string]: any; Key: string; }) => {
            for (const key in item) {
                if (key != 'Key' && key != 'id' && key != 'op') {
                    deleteParams.push({
                        key: item?.Key,
                        KindCode: key,
                        text: item[key],
                        operType: 2,
                    });
                };
            };
        });
        const modifyParams = _modifyData?.map((item: { Key: string; KindCode: string; NewLangText: string; }) => {
            return {
                key: item?.Key,
                KindCode: item?.KindCode,
                text: item?.NewLangText,
                operType: 1,
            };
        });
        const componentInfo = _deleteData.concat(modifyParams);
        const siteVersionInfo = sites?.filter((item: { key: string; }) => item?.key != '3')?.map((item1) => {
            return {
                appId: appInfo?.appId || '',
                dataVersionId: leftRef?.current?.currentDataVersionId || item1?.DataVersionId || '',
                siteType: item1?.SiteType || 0,
                siteOutId: item1?.OutId || ''
            };
        });
        setUpdateLoading(true);
        setClosable(false);
        try {
            const result = await saveData(appInfo?.App?.Id, {
                siteVersionInfo,
                componentInfo,
            });
            if (result === true) {
                message.success('同步更新成功');
                onClose();
            };
            setUpdateLoading(false);
            setClosable(true);
        } catch (error: any) {
            setUpdateLoading(false);
            setClosable(true);
            message.error(error);
        };
    };

    const actionTypes = useMemo(() => {
        return [
            {
                key: 'delete',
                label: '删除',
            },
            {
                key: 'modify',
                label: '修改',
            },
        ];
    }, []);

    const operations = useMemo(() => {
        return (
            <Button
                type='primary'
                icon={UpdateSvg()}
                loading={updateLoading}
                onClick={onUpdate}
            >
                全部更新
            </Button>
        )
    }, [deleteData, modifyData, updateLoading, sites, appInfo]);

    return (
        <div className='inbiz-lang-manage-drawer-content'>
            <Tabs
                activeKey={currentAction}
                onChange={setCurrentAction}
                tabBarExtraContent={operations}
            >
                {
                    actionTypes?.map((item) => {
                        return (
                            <TabPane key={item?.key} tab={item?.label} forceRender={true}>
                                <ActionTable
                                    action={currentAction}
                                    data={item?.key == 'delete' ? deleteData : modifyData}
                                    setData={item?.key == 'delete' ? setDeleteData : setModifyData}
                                    allLangs={allLangs}
                                />
                            </TabPane>
                        )
                    })
                }
            </Tabs>
        </div>
    )
}